<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    title="详细信息"
    :visible.sync="open"
    append-to-body
    width="80%"
    @close="handleClose"
  >
    <div class="form-block">
      <div class="form-block-title">基本信息</div>
      <el-descriptions>
        <el-descriptions-item label="基地名称">
          <b>{{ form.name || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="基地面积">
          <b>{{ form.area ? form.area + "亩" : "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="所属区域">
          <b>
            {{
              `${form.provinceName}/${form.cityName}/${form.districtName} ${form.address}`
            }}</b
          >
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          <b>{{ form.address || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="基建成本">
          <b>{{
            form.constructionCost ? form.constructionCost + "元" : "-"
          }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <b>{{ form.remarks || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="基地照片" :span="3">
          <div class="padding">
            <ImagePreview
              :src="form.fileUrls || placeholderImg"
              :width="100"
              :height="100"
            ></ImagePreview>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="form-block">
      <div class="form-block-title">关联塘口</div>
      <ul class="relevance-card">
        <li v-for="item in form.culturePondList" :key="item.id">
          <div class="relevance-card-content">
            <div>
              <ImagePreview
                :src="item.fileUrls || placeholderImg"
                :width="70"
                :height="70"
              ></ImagePreview>
            </div>
            <div class="pl-10">
              <p class="title_18px">{{ item.name }}</p>
              <p><span class="title_gray">面积：</span>{{ item.area }}亩</p>
              <p>
                <span class="title_gray">设备：</span>{{ item.deviceCnt }}台
              </p>
            </div>
          </div>
          <div class="relevance-card-footer">
            <div>
              <span class="title_gray">养殖：</span
              >{{ item.breedSpecies || "无" }}
            </div>
          </div>
        </li>
      </ul>
      <p class="relevance-empty" v-if="!isNonEmptyArray(form.culturePondList)">未关联塘口</p>

    </div>

    <div class="form-block">
      <div class="form-block-title">关联设备</div>
      <ul class="relevance-card">
        <li v-for="item in form.deviceList" :key="item.id">
          <div class="relevance-card-content">
            <div>
              <ImagePreview
                :src="item.fileUrls || placeholderImg"
                :width="70"
                :height="70"
              ></ImagePreview>
            </div>
            <div class="pl-10">
              <p class="title_18px">{{ item.name }}</p>
              <p><span class="title_gray">编号：</span>{{ item.code }}</p>
              <p>
                <span class="title_gray">绑定区域：</span
                >{{
                 item.culturePondName || item.productionBaseName  || '-'
                }}
              </p>
            </div>
          </div>
          <div class="relevance-card-footer">
            <div>
              <span class="title_gray">投运日期：</span
              >{{ item.useDate || "-" }}
            </div>
          </div>
        </li>
      </ul>
      <p class="relevance-empty" v-if="!isNonEmptyArray(form.deviceList)">未关联设备</p>
    </div>

    <div class="form-block">
      <div class="form-block-title">关联人员</div>
      <ul class="relevance-card">
        <li v-for="item in form.userList" :key="item.id">
          <div class="relevance-card-content">
            <div>
              <ImagePreview
                :src="item.avatar || placeholderImg"
                :width="70"
                :height="70"
              ></ImagePreview>
            </div>
            <div class="pl-10">
              <p class="title_18px">{{ item.username }}</p>
              <p><span class="title_gray">角色：</span>{{ item.roleNames }}</p>
              <p>
                <span class="title_gray">管理区域：</span
                >{{ item.culturePondNames || item.productionBaseNames || "-" }}
              </p>
            </div>
          </div>
          <div class="relevance-card-footer">
            <div>
              <span class="title_gray">手机号：</span
              >{{ item.phonenumber || "-" }}
            </div>
          </div>
        </li>
      </ul>
      <p class="relevance-empty" v-if="!isNonEmptyArray(form.userList)">未关联人员</p>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/production/base";
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "production-base_detail",
  components: { ImagePreview },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      placeholderImg: require("@/assets/images/production.png"),
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      queryParams: { id: undefined },
      title: "",
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        this.title = this.params.title;
        if (val) {
          this.queryParams.id = this.params.id;
          this.getDetail();
        }
      },
    },
  },
  methods: {
    isNonEmptyArray(variable) {
      return Array.isArray(variable) && variable.length > 0;
    },
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">


::v-deep .el-descriptions__body {
  background-color: transparent !important;
}
</style>